<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/shoppingcart.css">
   
</head>

<body>
        <div class="top_nav">
                <div class="top_nav_wrapper">
                    <ul class="top_nav_l">
                        <li><a href=""> <img src="../img/xingxing.png" alt="">收藏鲜花网(hua.com) </a></li>
                        <li><a href=""><img src="../img/weixin.png" alt=""> 关注微信</a></li>
                        <li><a href=""><img src="../img/hua.png" alt=""> 花礼网app</a></li>
                    </ul>
        
                    <ul class="top_nav_r">
                        <li id="login"><a href="./login.html">登录</a></li>
                        <li id="reg"><a href="./reg.html">注册</a></li>
                        <li id="logout"><a href="#">注销</a></li>
                        <li><a href="">订单查询</a></li>
                        <li><a href="">客户服务</a></li>
                        <li><a href="shoppingcart.html"> 购物车 <img src="../img/gouwuchekong.png" alt=""></a></li>
                        <li>鲜花礼品网:国内领先鲜花网品牌</li>
                    </ul>
                </div>
        
            </div>
        
            <div class="header_container">
                <div class="logo">
                    <a href="home_page.html" class="logo_nav"></a>
                </div>
                <div class="search-box-group">
                    <span class="search_img"></span>
                    <input type="text" class="search_txt" placeholder="商品搜索">
                    <button class="search_btn"> 搜索</button>
                </div>
                <ul class="searvice">
                    <li class="searvice_phon"><span class="phon_img"></span><span>400-889-8188</span> </li>
                    <li class="searvice_kefu"><span class="kefu_img"></span> <span>在线客服</span></li>
                </ul>
            </div>
   
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="goods_list">
             

            </tbody>
        </table>
        <div class="foot" id="foot">
            <a class="fl delete" id="deleteAll">删除</a>
            <div class="fr closing">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件</div>
        </div>
    </div>
    <script src="../js/api.js"></script>
    <script src="../js/jquery.js"></script>
    <script>
        var login_username = localStorage.getItem('loginname');
        console.log(login_username)
        showCart({
            username: login_username
        }).then((data) => {

            var {
                status,
                data
            } = data;
            console.log(data)
            var res = '';
            if (status) {
                data.forEach(val => {

                    res += `
                   <tr>
                            <td class="checkbox">
                                <input class="check-one check" type="checkbox" />
                            </td>
                            <td class="goods">
                                    <img src="${val.img}" alt="">
                                <span>${val.title}</span>
                            </td>
                            <td class="price">${val.price}</td>
                            <td class="count">
                                <span class="reduce">-</span>
                                <input class="count-input" type="text" value="${val.num}" goods_id="${val.id}" />
                                <span class="add">+</span>
                            </td>
                            <td class="subtotal">${val.price*val.num}</td>
                            <td class="operation">
                                <span class="delete">删除</span>
                            </td>
                        </tr>`
                });

                // console.log(res);
                $('.goods_list').html(res);
            }
            // caculatesum();
        })
        //货物数量++
        $('body').on('click', '.add', function () {
            // $(this).prev().val()++;
            var num = $(this).prev().val() * 1;
            num++;
            $(this).prev().val(num)
            //改变小计显示
            $(this).parent().next().html(num * $(this).parent().prev().html())
            //   console.log( $(this).parent().next().html(),$(this).parent().prev().html())

            var goods_id = $(this).prev().attr('goods_id');
            console.log(login_username, num, goods_id)
            changeNum({
                username: login_username,
                num,
                goods_id
            }).then(data => {
                console.log(data)
            })
            caculatesum();
        })
        //货物数量--
        $('body').on('click', '.reduce', function () {
            var num = $(this).next().val() * 1;

            if (num > 1) {
                num--;
                $(this).next().val(num)
                $(this).parent().next().html(num * $(this).parent().prev().html())
                //   console.log( $(this).parent().next().html(),$(this).parent().prev().html()*1)
                var goods_id = $(this).next().attr('goods_id');
                console.log(login_username, num, goods_id)
                changeNum({
                    username: login_username,
                    num,
                    goods_id
                }).then(data => {
                    console.log(data)
                })
            }

            caculatesum();
        })
        //物品单独删除
        $('body').on('click', '.operation .delete', function () {
            var tr = $(this).parent().parent();
            var goods_id = tr.find('.count-input').attr('goods_id')
            var checked = tr.find('.check-one ').prop('checked');
            console.log(goods_id, login_username, checked)
            if (checked) {
                delCart({
                    id: goods_id,
                    username: login_username
                }).then(data => {
                    console.log(data)
                    if (data.status) {
                        tr.remove();
                    }
                })
            }
            caculatesum();
        })

        //全选
        $('body').on('click', '.check-all ', function () {
            console.log($('.check-all').prop('checked'))
            $('.check-one').attr('checked', $('.check-all').prop('checked'));
            caculatesum();
        })
        //单选
        $('body').on('click', '.check-one', function () {
            var len = 0;
            for (i = 0; i < $('.check-one').length; i++) {
                if ($('.check-one').eq(i).prop('checked'))
                    len++;
            }
            if (len == $('.check-one').length) {
                $('.check-all').attr('checked', true)
            } else {
                $('.check-all').attr('checked', false)
            }
            //  console.log(len)

            caculatesum();
        })
        //多个物品删除
        $('body').on('click', '#deleteAll', function () {
            var check_arr = [];

            for (i = 0; i < $('.check-one').length; i++) {
                if ($('.check-one').eq(i).prop('checked')) {
                    x = $('.check-one').eq(i).parent().parent().find('.count-input').attr('goods_id')

                    check_arr.push(x);
                }
            }
            var check_string = check_arr.toString()
            console.log(check_string)

            delCart({
                username: login_username,
                id: check_string
            }).then(data => {
                console.log(data)
                if (data.status) {
                    for (i = 0; i < $('.check-one').length; i++) {
                        if ($('.check-one').eq(i).prop('checked')) {
                            $('.check-one').eq(i).parent().parent().remove();
                            i--;
                        }
                    }
                }
            })

            caculatesum();
        })
        //跳转商品列表

        $('#list_page').click(function () {
            location.href = 'goods_list.html'
        })

        //物品数量失焦事件
        $('body').on('focusout', '.count-input', function () {
            var goods_id = $(this).attr('goods_id')
            var num = $(this).val();
            changeNum({
                username: login_username,
                num,
                goods_id
            }).then(data => {
                if (data.status) {
                    $(this).parent().next().html(num * $(this).parent().prev().html())
                    $(this).val(num);
                }
            })

        })


        //计算总价函数
        function caculatesum() {
            var sumvalue = 0,
                sums = 0;
            for (i = 0; i < $('.price').length; i++) {
                if ($('.check-one ').eq(i).prop('checked') == true) {
                    sumvalue += $('.subtotal').eq(i).html() * 1;
                    sums += $('.count-input').eq(i).val() * 1;
                }
            }

            $('#priceTotal').text(sumvalue.toFixed(2));
            $('#selectedTotal').html(sums.toFixed(2));
        }

           //是否登录判定来显示用户名  
      if(login_username){
                $('#login').html(`<p >欢迎：${login_username}</p>`)
        }  
         //注销按钮用来退出用户
    $('body').on('click','#logout',function(){
        if(login_username){
            localStorage.removeItem('loginname');
            $('#login').html(`<a href="./login.html">登录</a>`);
            $('.goods_list').html('');
        }
    })
    </script>
</body>

</html>